<template>
    <div class="detail-wrapper">
        <detail-banner :bannerImg='bannerImg' :sightName='sightName' :gallaryImgs='gallaryImgs'></detail-banner>
        <detail-header></detail-header>
        <div class="content">
            <detail-mapinfo></detail-mapinfo>
            <detail-list :list='list'></detail-list>
            <detail-comment></detail-comment>
        </div>
    </div>
</template>

<script>
    import DetailBanner from './components/Banner'
    import DetailHeader from './components/Header'
    import DetailList from './components/List'
    import DetailComment from './components/Comment'
    import DetailMapinfo from './components/Mapinfo'
    import axios from 'axios'
    export default {
        name: 'Detail',
        components: {
            DetailBanner,
            DetailHeader,
            DetailList,
            DetailComment,
            DetailMapinfo
        },
        mounted(){
            this.getDetailInfo()
        },
        methods: {
            getDetailInfo(){
                axios.get('/static/mock/detail.json?id='+ this.$route.params.id)
                    .then(this.getDetailInfoSucc)
            },
            getDetailInfoSucc(res){
                res = res.data
                if(res.ret && res.data){
                    const data = res.data
                    this.list = data.categoryList
                    this.bannerImg = data.bannerImg
                    this.gallaryImgs = data.gallaryImgs
                    this.sightName = data.sightName
                }
            }

        },
        data() {
            return {
                list: [],
                bannerImg: '',
                sightName: '',
                gallaryImgs: []
            }
        },
    }
</script>

<style scoped lang='stylus'>
    .detail-wrapper
        background #f5f5f5
        .content
            height 20rem
</style>